<template>
  <div class="icon-component" :style="componentStyle">
    <i :class="图标类名" :style="iconStyle"></i>
  </div>
</template>

<script>
export default {
  name: 'IconComponent',
  componentName: '图标',
  icon: 'el-icon-picture-outline',
  defaultProps: {
    图标类名: 'el-icon-star-on',
    图标大小: '24px',
    图标颜色: '#333333',
    旋转动画: false,
    脉冲动画: false
  },
  props: {
    图标类名: {
      type: String,
      default: 'el-icon-star-on'
    },
    图标大小: {
      type: String,
      default: '24px'
    },
    图标颜色: {
      type: String,
      default: '#333333'
    },
    旋转动画: {
      type: Boolean,
      default: false
    },
    脉冲动画: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    componentStyle() {
      return {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%'
      };
    },
    iconStyle() {
      return {
        fontSize: this.图标大小,
        color: this.图标颜色,
        animation: this.getAnimation()
      };
    }
  },
  methods: {
    getAnimation() {
      if (this.旋转动画 && this.脉冲动画) {
        return 'spin 2s infinite linear, pulse 1s infinite';
      } else if (this.旋转动画) {
        return 'spin 2s infinite linear';
      } else if (this.脉冲动画) {
        return 'pulse 1s infinite';
      }
      return 'none';
    }
  }
};
</script>

<style scoped>
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.icon-component i {
  display: inline-block;
}
</style>